<template>
  <div id="findMessageOnly">
    <div class="f-header">
      <h2 style="margin-left: 20px">用户管理</h2>
      <ul class="f-header-title">
        <router-link to="/homePageIndex" class="goBack">
          <li><i class="el-icon-discount"></i> 首页</li>
        </router-link>
        <li>/ 用户管理</li>
      </ul>
    </div>
    <div class="f-content">
      <div class="f-content-ft">
        <el-button class="modifyMsg" @click="updateMsg"
          ><i class="el-icon-plus"></i> 修改</el-button
        >
        <el-button class="getMsgOnly" @click="getMsgOnly"
          ><i class="el-icon-refresh"></i>刷新</el-button
        >
      </div>
      <div class="f-content-table">
            <el-table :data="tableData" class="f_continer_table_O">
                <el-table-column prop="empId" label="员工ID" width="150"></el-table-column>
                <el-table-column prop="empCode" label="员工工号" width="150"></el-table-column>
                <el-table-column prop="empName" label="员工姓名" width="150"></el-table-column>
                <el-table-column prop="sex" label="员工性别" width="150"></el-table-column>
                <el-table-column prop="age" label="年龄" width="150"></el-table-column>
                <el-table-column prop="departmentId" label="部门ID" width="150"></el-table-column>
                <el-table-column prop="phone" label="电话号码" width="150"></el-table-column>
            </el-table>
      </div>
        <span id="footPage">
            <el-button type="button" @click="jumpFirstPage" id="firstPage">首页</el-button>
            <el-pagination :page-size="5" :current-page="currentPage" @current-change="handleCurrentChange" layout="total,prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            :total="tableData.length"
            id="page" >
            </el-pagination>
            <el-button type="button" @click="jumpLastPage" id="lastPage">尾页</el-button>
        </span>
    </div>
  </div>
</template>

<script>

export default {
  name: "FindMessageOnly",
  data() {
    return {
      tableData:[],
      currentPage:1
    };
  },
  methods: {
    getMsgOnly() {
      console.log(this.$store.getters.getEmp)
      this.tableData=this.$store.getters.getEmp
      console.log(this.tableData)
      },
    updateMsg(){},
    handleCurrentChange(val){
        console.log(`当前页数：${val}`)
        this.currentPage = val
    },
     // 跳转首页
    jumpFirstPage(){
        this.currentPage = 1
    },
    // 跳转尾页
    jumpLastPage(){
        this.currentPage = Math.ceil(this.tableData.length / 5)
    },
  }
}
    
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#findMessageOnly{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1270px;
  height: 690px;
  /* background-color: hotpink; */
}
.f-header {
  position: relative;
  width: 1270px;
  height: 60px;
  line-height: 60px;
  /* background-color: rgb(247, 146, 146); */
}
.f-header-title {
  list-style: none;
}
.goBack {
  text-decoration: none;
}
.f-header .f-header-title li {
  position: relative;
  height: 50px;
  line-height: 50px;
  /* background-color: chartreuse; */
}
.f-header .f-header-title li:nth-child(1) {
  top: -55px;
  left: 1090px;
  width: 60px;
  font-size: 18px;
  color: #080808;
  font-weight: bold;
}
.f-header .f-header-title li:nth-child(1):hover {
  color: #00c0ff;
}
.f-header .f-header-title li:nth-child(2) {
  top: -105px;
  left: 1160px;
  width: 80px;
  font-weight: bold;
  color: gray;
}

.f-content {
  position: relative;
  left: 20px;
  width: 1220px;
  height: 600px;
  border: 2px solid rgb(197, 196, 196);
  border-top: 5px solid rgb(179, 177, 177);
  border-radius: 5px;
  /* background-color: gray; */
}
.f-content-ft {
  height: 45px;
  line-height: 45px;
  border-bottom: 2px solid rgb(194, 193, 193);
  /* background-color: indianred; */
}
.modifyMsg {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  margin-left: 20px;
  background-color: #22b86c;
}
.getMsgOnly {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  background-color: #22b86c;
}

.f-content-table {
  width: 1200px;
  height: 400px;
  position: relative;
  top: 15px;
  left: 10px;
  /* background-color: rgb(209, 208, 208); */
}
#footPage {
    position: relative;
    left: 500px;
    top: 10px;
}

#firstPage {
    position: absolute;
    left: -50px;
    top: 7px;
}

#lastPage {
    position: absolute;
    left: 210px;
    top: 7px;
}
</style>